<template>
  <div class="page-header">
    <div class="header-left">
      <h1 class="page-title">销售订单管理</h1>
      <div class="status-badges">
        <el-tag type="primary" class="total-badge">
          <el-icon><Document /></el-icon>
          总订单: {{ stats.totalOrders }}
        </el-tag>
        <el-tag type="warning" class="pending-badge">
          <el-icon><Clock /></el-icon>
          待处理: {{ stats.pendingOrders }}
        </el-tag>
        <el-tag type="success" class="completed-badge">
          <el-icon><Checked /></el-icon>
          已完成: {{ stats.completedOrders }}
        </el-tag>
        <el-tag type="danger" class="problem-badge">
          <el-icon><Warning /></el-icon>
          问题订单: {{ stats.problemOrders }}
        </el-tag>
      </div>
      <!-- 添加提示信息 -->
      <div class="data-management-tip">
        <el-alert
          title="提示：此页面用于批量数据维护。如需进行日常业务操作，请切换到业务模式"
          type="info"
          show-icon
          :closable="false"
        >
          <template #default>
            <div class="tip-content">
              <span>提示：此页面用于批量数据维护。如需进行日常业务操作，请前往</span>
              <el-link type="primary" @click="goToSalesManagement">销售管理 → 销售订单</el-link>
            </div>
          </template>
        </el-alert>
      </div>
    </div>
    
    <div class="header-actions">
      <!-- 同步订单 -->
      <el-button 
        type="primary" 
        :icon="Refresh" 
        @click="handleSyncOrders"
        :loading="syncing"
      >
        同步政采云订单
      </el-button>
      
      <!-- 导入订单 -->
      <el-button 
        :icon="Upload" 
        @click="handleImportOrders"
      >
        导入订单
      </el-button>
      
      <!-- 批量操作 -->
      <el-button 
        :icon="Operation" 
        @click="handleBatchOperations"
        :disabled="selectedOrders.length === 0"
      >
        批量操作 ({{ selectedOrders.length }})
      </el-button>
      
      <!-- 导出订单 -->
      <el-button :icon="Download" @click="handleExportOrders">
        导出订单
      </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { 
  Document, Clock, Checked, Warning, Refresh, Upload, 
  Operation, Download, Plus
} from '@element-plus/icons-vue'

// 使用路由
const router = useRouter()

// 定义组件属性
interface Stats {
  totalOrders: number
  pendingOrders: number
  completedOrders: number
  problemOrders: number
}

interface Props {
  stats: Stats
  syncing: boolean
  selectedOrders: any[]
}

const props = withDefaults(defineProps<Props>(), {
  stats: () => ({
    totalOrders: 0,
    pendingOrders: 0,
    completedOrders: 0,
    problemOrders: 0
  }),
  syncing: false,
  selectedOrders: () => []
})

// 定义组件事件
const emit = defineEmits<{
  (e: 'sync-orders'): void
  (e: 'import-orders'): void
  (e: 'batch-operations'): void
  (e: 'export-orders'): void
}>()

// 跳转到销售管理
const goToSalesManagement = () => {
  router.push('/sales/orders')
}

// 事件处理函数
const handleSyncOrders = () => {
  emit('sync-orders')
}

const handleImportOrders = () => {
  console.log('OrderPageHeader: handleImportOrders called');
  emit('import-orders');
}

const handleBatchOperations = () => {
  if (!props.selectedOrders || props.selectedOrders.length === 0) {
    ElMessage.warning('请先选择订单')
    return
  }
  emit('batch-operations', props.selectedOrders)
}

const handleExportOrders = () => {
  emit('export-orders')
}
</script>

<style scoped lang="scss">
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  
  .header-left {
    .page-title {
      margin: 0 0 12px 0;
      font-size: 24px;
      font-weight: 600;
      color: #1f2d3d;
    }
    
    .status-badges {
      display: flex;
      gap: 12px;
      
      .el-tag {
        display: flex;
        align-items: center;
        gap: 4px;
        font-weight: 500;
      }
    }
    
    .data-management-tip {
      margin-top: 12px;
      
      .tip-content {
        display: flex;
        align-items: center;
        gap: 4px;
      }
    }
  }
  
  .header-actions {
    display: flex;
    gap: 12px;
  }
}

// 响应式设计
@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    gap: 16px;
    
    .status-badges {
      flex-wrap: wrap;
    }
    
    .header-actions {
      flex-wrap: wrap;
      justify-content: center;
    }
  }
}
</style>